<template>
	<div class="content">
		<div class="tar m-b10">
			<Button type="primary" @click="add">添加</Button>
		</div>
		<Table ref="selection" :columns="columns4" :data="list"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="changepage" />
		<!-- 添加公告 -->
		<Modal v-model="modal1" title="添加产品介绍" width='40%' @on-ok="addgg">
			<Form :label-width="100" :model="addForm" ref="addUserForm" :rules="rules">
				<!--<FormItem label="语言选择">
					<Select placeholder="请选择语言" class="w-50" v-model="addForm.languageId">
						<Option value="1">中文</Option>
						<Option value="3">英文</Option>
					</Select>
				</FormItem>-->
				<FormItem label="产品名称" prop='title'>
					<Input class="w-50" v-model="addForm.title" placeholder="请输入产品名称" />
				</FormItem>
				<!--<FormItem label="链接">
					<Input type="text" class="w-50" v-model="targetUrl" placeholder="请输入图片链接" />
				</FormItem>-->
				<template>
					<Upload multiple type="drag" action="https://admin.catchon.vip/admin/operating/uploadpicture" :headers='myHeaders' :on-success='handleSuccess' name="imgUrl">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>上传图片</p>
						</div>
					</Upload>
				</template>
				<FormItem label="内容" prop='content'>
					<quill-editor v-model="addForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
					</quill-editor>
				</FormItem>
			</Form>
		</Modal>
		<!-- 查看产品详情 -->
		<Modal v-model="modal2" title="产品详情" width='40%' v-if="falg">
			<h1>{{ list[index].title }}</h1>
			<div v-html="list[index].content"></div>
		</Modal>
		<!-- 修改产品 -->
		<Modal v-model="modal3" title="修改产品介绍" width='40%' @on-ok="emitgg">
			<Form :label-width="100" :model="editForm" ref="addUserForm" :rules="rules1">
				<!--<FormItem label="语言选择">
					<Select placeholder="请选择语言" class="w-50" v-model="editForm.languageId">
						<Option value="1">中文</Option>
						<Option value="3">英文</Option>
					</Select>
				</FormItem>-->
				<FormItem label="产品名称" prop='title'>
					<Input class="w-50" v-model="editForm.title" placeholder="请输入产品名称" />
				</FormItem>
				<!--<FormItem label="链接">
					<Input type="text" class="w-50" v-model="targetUrl1" placeholder="请输入图片链接" />
				</FormItem>-->
				<FormItem label="当前图片">
					<img :src="srcimg" alt="" width="200">
				</FormItem>
				<template>
					<Upload multiple type="drag" :headers='myHeaders' action="https://admin.catchon.vip/admin/operating/uploadpicture" :on-success='handleSuccess' name="imgUrl">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>重新上传图片</p>
						</div>
					</Upload>
				</template>
				<FormItem label="内容" prop='content'>
					<quill-editor v-model="editForm.content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
					</quill-editor>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	let token = localStorage.getItem('mytoken')
	export default {
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer ' + token
				},
				list: [],
				id: '',
				ntid: '',
				falg: false,
				imgUrl: '', // 上传图片地址
				srcimg: '',
				targetUrl: '', // 链接
				targetUrl1: '', // 修改链接
				// // 分页
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				editorOption: {},
				rules: {
					title: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				rules1: {
					title: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				modal1: false,
				modal2: false,
				modal3: false,
				addForm: {
					languageId: '',
					title: '',
					content: ''
				},
				editForm: {
					languageId: '',
					title: '',
					content: ''
				},
				index: '',
				columns4: [{
						title: '产品名称',
						key: 'title',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2d8cf0'
									},
									on: {
										click: () => {
											this.chakan(this.list[params.index].id, params.index)
										}
									}
								},
								params.row.title
							)
						}
					},
					{
						title: '发布时间',
						key: 'createTime',
						sortable: true
					},
					{
						title: '链接',
						key: 'targetUrl'
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.emit(this.list[params.index].id)
											}
										}
									},
									'修改'
								),
								h(
									'Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												this.remove(this.list[params.index].id)
											}
										}
									},
									'删除'
								)
							])
						}
					}
				]
			}
		},
		methods: {
			// 添加产品
			add() {
				document.getElementsByClassName('ivu-upload-list')[0].innerHTML = '';
				this.modal1 = true
			},
			addgg() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 3,
					languageId: 1,
					targetUrl: "#",
					title: this.addForm.title,
					imgUrl: this.imgUrl,
					content: this.addForm.content
				})
				this.axios.post('operating/discover', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
							this.addForm.languageId = null
							this.addForm.title = null
							this.imgUrl = null
							this.targetUrl = null
							this.addForm.content = null
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 修改产品
			emit(id) {
				let token = localStorage.getItem('mytoken')
				this.modal3 = true
				this.ntid = id
				this.axios.get('operating/discover/' + id, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.editForm.languageId = res.data.data.discover.languageId
							this.editForm.title = res.data.data.discover.title
							this.srcimg = res.data.data.discover.imgUrl
							this.editForm.content = res.data.data.discover.content
							this.targetUrl1 = res.data.data.discover.targetUrl
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			emitgg() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 3,
					id: this.ntid,
					languageId: 1,
					targetUrl: "#",
					title: this.editForm.title,
					imgUrl: this.imgUrl,
					content: this.editForm.content
				})
				this.axios.put('operating/discover', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 删除产品
			remove(id) {
				let token = localStorage.getItem('mytoken')
				this.axios.delete('operating/discover/' + id, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 查看产品
			chakan(id, index) {
				this.index = index
				this.id = id
				this.falg = true
				this.modal2 = true
			},
			// 获取所有产品
			getList() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 3,
					pn: this.page,
					pageSize: this.pageSize
				})
				this.axios.post('operating/discovers', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.list = res.data.data.listDiscover
						this.info = res.data.data.integer
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 分页
			changepage(page) {
				this.page = page
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					typeId: 3,
					pn: page,
					pageSize: this.pageSize
				})
				this.axios.post('operating/discovers', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.list = res.data.data.listDiscover
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			// 富文本编辑器
			onEditorBlur() {
				// 失去焦点事件
			},
			onEditorFocus() {
				// 获得焦点事件
			},
			onEditorChange() {
				// 内容改变事件
			},
			// 获取上传图片的地址
			handleSuccess(res, file) {
				this.imgUrl = res.data.path
			}
		},
		created() {
			this.getList()
		},
		mounted() {
			this.$Message.config({
				top: 250
			})
		}
	}
</script>